import React from "react"
import { View } from "@tarojs/components"
import styles from "./index.module.scss"
import clsx from "clsx"

type IProps = {
  className?: string
  /** 加载图标大小，默认单位为 px
   * @default 30px
   */
  size?: number | string
  /** @default "#c8c9cc" */
  color?: React.CSSProperties["color"]
}
/**
 * taroify loading
 * @description 由于skyline下原组件部分css样式不支持, 故提取改造; 仅用于skyline页面下, webview模式下推荐仍然使用taroify loading组件
 * @only skyline
 */
export default function GpLoading({ className, size = 30, color = "#c8c9cc" }: IProps) {
  const style = {
    color,
    "--indicator-color": color
  }
  return (
    <View className={clsx(styles.loading, className)} style={style}>
      <View
        className={styles.loadingSpinner}
        style={{
          width: size,
          height: size
        }}
      >
        <View className={clsx(styles.loadingSpinnerItem, styles.loadingSpinnerItem_1)}></View>
        <View className={clsx(styles.loadingSpinnerItem, styles.loadingSpinnerItem_2)}></View>
        <View className={clsx(styles.loadingSpinnerItem, styles.loadingSpinnerItem_3)}></View>
        <View className={clsx(styles.loadingSpinnerItem, styles.loadingSpinnerItem_4)}></View>
        <View className={clsx(styles.loadingSpinnerItem, styles.loadingSpinnerItem_5)}></View>
        <View className={clsx(styles.loadingSpinnerItem, styles.loadingSpinnerItem_6)}></View>
        <View className={clsx(styles.loadingSpinnerItem, styles.loadingSpinnerItem_7)}></View>
        <View className={clsx(styles.loadingSpinnerItem, styles.loadingSpinnerItem_8)}></View>
        <View className={clsx(styles.loadingSpinnerItem, styles.loadingSpinnerItem_9)}></View>
        <View className={clsx(styles.loadingSpinnerItem, styles.loadingSpinnerItem_10)}></View>
        <View className={clsx(styles.loadingSpinnerItem, styles.loadingSpinnerItem_11)}></View>
        <View className={clsx(styles.loadingSpinnerItem, styles.loadingSpinnerItem_12)}></View>
      </View>
    </View>
  )
}
